<template>
    <lay-form :model="registerForm" :rules="rulesRegisterForm" required>
      <lay-form-item label="用户姓名" prop="username">
        <lay-input v-model="registerForm.username" class="registerForm">
          <template #prepend><lay-icon type="layui-icon-username"></lay-icon></template>
        </lay-input>
      </lay-form-item>
      <lay-form-item label="用户工号" prop="user_no">
        <lay-input v-model="registerForm.user_no" class="registerForm">
          <template #prepend><lay-icon type="layui-icon-user"></lay-icon></template>
        </lay-input>
      </lay-form-item>
      <lay-form-item label="用户密码" prop="password1">
        <lay-input v-model="registerForm.password1" type="password" class="registerForm">
          <template #prepend><lay-icon type="layui-icon-password"></lay-icon></template>
        </lay-input>
      </lay-form-item>
      <lay-form-item label="确认密码" prop="password2">
        <lay-input v-model="registerForm.password2" type="password" class="registerForm">
          <template #prepend><lay-icon type="layui-icon-password"></lay-icon></template>
        </lay-input>
      </lay-form-item>
      <lay-form-item label="用户邮箱">
        <lay-input v-model="registerForm.email" class="registerForm">
          <template #prepend><lay-icon type="layui-icon-email"></lay-icon></template>
        </lay-input>
      </lay-form-item>
      <lay-form-item label="选择产品"  prop="products" mode="inline">
        <lay-select v-model="registerForm.products" class="registerForm" :multiple="true">
          <template #prepend><lay-icon type="layui-icon-group"></lay-icon></template>
          <lay-select-option :value="item.id" :label="item.name" v-for="item in groups"></lay-select-option>
        </lay-select>
      </lay-form-item>
      <lay-form-item style="text-align: center;">
        <lay-button type="normal" @click="registerSubmit">注册用户</lay-button>
      </lay-form-item>
    </lay-form>
    <lay-line id="error_message">{{error_message}}</lay-line>
</template>

<script lang="ts">
export default {
    name: "registerUser"
}
</script>

<script lang="ts" setup>

import {onMounted, reactive, ref} from "vue";
import {layer} from "@layui/layer-vue";
import {passwordEncryption, userStore} from "../../store/user";
import {getProducts, register} from "../../api/module/user";
import {useRouter} from "vue-router";

const router = useRouter();
const user = userStore();

const groups = ref([]);
const registerForm = reactive({username: "", user_no: "", password1: "", password2: "", email: "",
    products: [], tenant: "private"});


const error_message = ref("");

const rulesRegisterForm = ref({
  email: {
      type: 'email'
  },
  username : {
    type :  'string',
    min : 2,
    max : 20
  },
  user_no : {
    type :  'string',
    min : 4,
    max : 20
  },
  password1 : {
    type :  'string',
    min : 6,
    max : 20
  },
  password2 : {
    type :  'string',
    min : 6,
    max : 20,
  }
});


const registerFormRef = ref();

const registerSubmit = async () => {
    if (registerForm.user_no === ""){
        layer.msg("用户工号为空！")
    }else if(registerForm.password1 === "" || registerForm.password1 !== registerForm.password2){
        layer.msg("密码为空或2次输入的密码不相等！")
    }else{
        const registerFormSubmit = reactive(JSON.parse(JSON.stringify(registerForm)));
        registerFormSubmit.password1 = passwordEncryption(registerForm.password1);
        registerFormSubmit.password2 = passwordEncryption(registerForm.password2);
        console.log('loginForm:' + `${JSON.stringify(registerFormSubmit)}`)
        let {result, status, message} = await register(registerFormSubmit);
        if (status == 'success') {
            router.push('/user/login');
        }
        error_message.value = "";
        error_message.value = message;
    }
}

const getAllZone = async () => {
    let {result, status, message} = await getProducts({user_no: null});
    if (status == 'success') {
        groups.value = result;
    }else {
        layer.msg(message);
    }
};

onMounted(() => {
    getAllZone();
})
</script>

<style scoped>
.registerForm {
    width: 250px;
}
</style>